import React from 'react';
import { Link, useLocation, useHistory } from 'react-router-dom';
import { Layout } from 'antd';
import './index.less';
import routerConfig from '../../router'

console.log('routerConfig', routerConfig)

const { Header } = Layout;

function Nav() {
  const { pathname } = useLocation()
  const history = useHistory()

  const handleLogout = () => {
    window.localStorage.clear()
    window.sessionStorage.clear()
    history.push('/login')
  }

  return (
    <Header>
      <div className="logo">专属后台</div>
      <div className="nav">
        {
          routerConfig.filter(i => !i.alone).map((i) => (
            <div className={`nav-item ${pathname === i.path ? 'active' : ''}`} key={i.path}>
              <Link className="nav-link" to={i.path}>{i.title}</Link>
            </div>
          ))
        }
      </div>
      <div className="logout" onClick={handleLogout}>退出登录</div>
    </Header>
  )
}

export default Nav;
